<template>
    <div>
        <!-- <el-checkbox :label="item.name" size="large" v-for="item in listData" :key="item.id"
            @change="infosele($event, item.id)" /> -->
        <el-checkbox-group v-model="checkList">
            <el-checkbox :label="item.name" :value="item.id" v-for="item in listData" :key="item.id"
                @change="infosele($event, item.id)" />
        </el-checkbox-group>
        <div class="dialog-footer" style="display: flex;justify-content: center;margin-top: 20px">
            <el-button @click="store.$state.dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="entersetinfo">
                确认
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { getUserInfo, getStaffRole, setRole } from '@/api/staff'
import { useStore } from '@/stores/counter'
import { ElMessage } from 'element-plus'
const store = useStore()
let listData: any = ref([])
let userInfo: any = ref([1])
const checkList = ref([])
let arr: any = ref([])
watchEffect(() => {
    if (store.$state.dialogVisible == true) {
        getStaffRole(store.$state.infoId).then(res => {
            checkList.value = res.data.data.roleIds
            arr.value = res.data.data.roleIds
        })
    }
})
getUserInfo().then(res => {
    listData.value = res.data.data
})
const infosele = (e: any, id: number) => {
    if (e) {
        arr.value.push(id)
    } else {
        userInfo.value.splice(userInfo.value.indexOf(id), 1)
        arr.value.splice(arr.value.indexOf(id), 1)
    }
}
//设置员工角色
const entersetinfo = () => {
    setRole({ id: store.$state.infoId, roleIds: arr.value }).then(res => {
        if (res.data.code == 10000) {
            ElMessage({
                message: res.data.message,
                type: 'success',
            })
            store.$state.dialogVisible = false

        } else {
            ElMessage({
                message: res.data.message,
                type: 'warning',
            })
        }
    })
}
</script>

<style scoped></style>